<template>
	<view class="live-container">
        <view class="live-tips">下面是为您精选的优质主播</view>
        <mescroll-body ref="mescrollRef" :down="down" @down="downCallback" @up="upCallback">
            <view class="live-item u-m-20 u-p-15" v-for="(live, index) in liveVideoList" :key="index" @click="handleLiveVideo(live.we_chat_room_id)">
                <view class="live-item-left">
                    <view class="live-cover-img">
                        <u-image width="330" height="330" :src="live.background_image_url"></u-image>
                    </view>
                    <view class="live-status-box">
                        <text class="live-status">{{ live.status | liveStatusFilter }}</text>
                    </view>
                    <view class="live-btn">
                        <u-icon name="zhibo" custom-prefix="custom-icon" size="42" color="#FFFFFF"></u-icon>
                    </view>
                </view>
                <view class="live-item-right">
                    <view class="live-title u-font-26">{{ live.room_name }}</view>
                    <view class="live-seller">
                        <text class="seller-name">{{ live.seller_name }}</text>
                    </view>
                    <view class="live-goods u-flex u-m-t-50" v-if="live.goods_info">
                        <view class="goods-info" :class="goodsIndex > 1 ? 'more-item' : ''" v-for="(goods, goodsIndex) in live.goods_info" :key="goodsIndex">
                            <image class="goods-img" :src="goods.img_show_url"></image>
                            <view class="goods-more" v-if="goodsIndex === 1"></view>
                            <view class="goods-num" v-if="goodsIndex === 1">+{{ live.goods_info.length }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
    import * as API_Live from '@/api/live.js'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 10
                },
                liveVideoList: [], //直播列表
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                }
			}
		},
		methods: {
            //下拉刷新
            downCallback() {
                this.params.page_no = 1
                this.liveVideoList = []
                this.getLiveVideoList()
            },
            //上拉加载
            upCallback(page) {
                this.params.page_no = page.num
                this.getLiveVideoList()
            },
            //点击进入直播间
            handleLiveVideo(roomId) {
                uni.navigateTo({ url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}` })
            },
            //获取优惠券列表
            getLiveVideoList() {
                API_Live.getLiveVideoRoomList(this.params).then(response => {
                    const { data } = response
                    this.liveVideoList.push(...data)
                    setTimeout(()=>{
                        this.mescroll.endBySize(data.length, response.data_total)
                    }, 500)
                })
            }
		}
	}
</script>

<style lang="scss">
    @import '../../static/common/css/live-video.scss';
    .live-container {
        .live-tips {
            background-color: #FFFFFF;
            margin: 20rpx;
            padding: 10rpx 0;
            text-align: center;
            color: #FFA449;
            border-radius: 20rpx;
        }
    }
</style>
